import * as React from 'react';
import LandingTitle from './title';
import LandingIconFeature from './icon-feature';
import styles from './things-that-matter.module.scss';

export default () => (
  <div className={`container ${styles.container}`}>
    <div className="row">
      <LandingTitle text="It Doesn’t Stop There..." />
    </div>
    <div className={`row ${styles.thingsRow}`}>
      <LandingIconFeature
        title="Customization"
        description="Comprehensive customization and extensibility options. From template React components to custom plugins."
      />
      <LandingIconFeature
        title="Localization"
        description="Localize or globalize your react app with ease. Every text element within our React components is customizable."
      />
      <LandingIconFeature
        title="TypeScript"
        description="Create easy-to-maintain and bug-free React applications with our autogenerated TypeScript definitions."
      />
      <LandingIconFeature
        title="Docs & Examples"
        description="Improve your productivity using our straightforward documentation and live React demos/code examples."
      />
    </div>
  </div>
);
